<template>
<div>
  <template>
    <component
      v-for="(item, index) in setCurrent"
      :key="index"
      :tabType="tabType"
      :id="index"
      :class="[!loading && $route.params.id === index? 'compoent-active':'compoent-none']"
      :is="item.component"
      :tel="tel"
      :callInfo="callInfo"
      :relatedCallList="relatedCallList"
      :field = "field"
      :callProvince="callProvince"
      :callCity="callCity"
      :cid="item.cid"
      @addCustomerSuccess="addCustomerSuccess"
      @mergeCustomerSuccess="mergeCustomerSuccess"
      keep-alive></component>
  </template>
</div>
</template>
<script>
  // 此组件是来电合并&&添加客户初始化加载
  import { mapState } from 'vuex'
  import CdrCallSummary from './CdrCallSummaryTemp'
  import CdrMergeCustomer from './CdrMergeCustomer'
  import CdrAddCustomer from './CdrAddCustomer'
  export default {
    name: 'CdrCallSummaryAyna',
    data () {
      return {
        loading: true,
        tabType: 'cdr_call',
        // 本次来电基本信息
        callInfo: null,
        tel: '',
        custType: '',
        callProvince: '',
        callCity: '',
        cid: '',
        field: '',
        currentRouter: [],
        popIframe: false,
        relatedCallList:{}
      }
    },
    computed: {
      ...mapState([
        'routes'
      ]),
      setCurrent () {
        const component = this.routes.call
        if (component) {
          return component
        }
      }
    },
    methods: {
      initComponent () { // 初始化加载组件
        let component = ''
        if (this.custType === 'unk') { // 未知客户
          component = CdrAddCustomer
          this.callProvince = this.callInfo.PROVINCE
          this.callCity = this.callInfo.DISTRICT
          this.tel = this.callInfo.CALL_NO
        } else if (this.custType === 'one') { // 定位到1个客户
          component = CdrCallSummary
          this.cid = this.callInfo.CUSTOMER_ID
        } else if (this.custType === 'multi') { // 定位到多个客户
          component = CdrMergeCustomer
          this.field = 'phone'
          this.callProvince = this.callInfo.PROVINCE
          this.callCity = this.callInfo.DISTRICT
          this.tel = this.callInfo.CALL_NO
        }
        let cid = this.callInfo.CUSTOMER_ID
        let data = {
          cid,
          type: 'call',
          name: this.$route.params.id,
          component: component
        }
        this.$store.dispatch('registerRouter', data).then(() => { // 动态注册组件，存入vuex
          this.loading = false
        })
      },
      addCustomerSuccess (flag) {
        if (flag) {
          this.fetchData()
        }
      },
      mergeCustomerSuccess (flag) {
        if (flag) {
          this.fetchData()
        }
      },
      fetchData () {
        let callSheetId = this.$route.params.id
        let callInfo = null
        let localList = []
        let sessionList = window.sessionStorage.getItem('callList')
        if (sessionList && sessionList !== 'undefined') {
          localList = JSON.parse(sessionList)
        }
        if (!localList || localList === 'undefined') {
          localList = []
        }
        let list = this.$store.state.call.callList.cdr_call.list || localList
        // 判断是否有通话id相关的详情
        //
        for (let i = 0; i < list.length; i++) {
          if (list[i]._id === callSheetId) {
            callInfo = list[i]
          }
        }
        this.$store.commit('call/SET_READ', callSheetId)
        this.$store.commit('call/COUNT_UNREAD_CDR')
        if (callInfo) {
          this.callInfo = callInfo
          this.custType = callInfo.CUSTOMER_TYPE
          this.initComponent() // 初始化加载客户组件
        }
        let iframeUrl = []
        let callIframeUrl = window.sessionStorage.getItem('callIframeUrl')
        if (callIframeUrl && callIframeUrl !== 'undefined') {
          iframeUrl = JSON.parse(callIframeUrl)
        }
        if (iframeUrl) {
          for (let m = 0; m < iframeUrl.length; m++) {
            if (iframeUrl[m].callSheetId === callSheetId) {
              this.$store.commit('IS_CALL_INTERFACE', {status: true}) // 是否要显示iframe组件
              this.popIframe = true
              break
            } else {
              this.popIframe = false
            }
          }
        } else {
          this.popIframe = false
        }
        let page = document.getElementById('call_interface_wrap')
        if (this.popIframe) { // 是展示iframe，解决合并完客户之后，外层不消失，导致不能操作和编辑客户资料
          if (page) {
            page.style.display = 'block'
          }
        } else {
          if (page) {
            page.style.display = 'none'
          }
        }
        this.getinfoData(callSheetId)
        // this.$emit('routeChange', this.$route.path.split('/')[3])
      },
      // 获取通话信息
      async getinfoData(callSheetId){
        let data = {
            CALL_SHEET_ID: callSheetId,
            autoqc: true
        }
        await this.$store.dispatch('queryCallList', data).then((res) => {
          if (res && res.list && res.list.length) {
            this.relatedCallList = res.list[0]
          } else {
            this.relatedCallList = {}
          }
        })
      }
    },
    watch: {
      $route (to, form) {
        if (to.path.split('/')[3] === 'cdr_call' && to.params.id) {
          console.log(to.params.id)
          this.fetchData()
        }
      }
    },
    created () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
.compoent-none
  display none
.compoent-active
  display block
.iframe-wrap
  height calc(100vh - 54px)
iframe
  height 100%
  width 100%
.new-window-text
  color $c-prompt
  text-align center
  font-size 20px
  line-height calc(100vh - 54px)
</style>

